<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="root">
    <!-- 自定义组件 单标签 -->
    <Fx></Fx>
    <hr>
    <Fx></Fx>
    <hr>
    <Fx></Fx>
  </div>

  <!-- 定义一个组件所用的模板 -->
  <!-- script标签中 type指定类型，不指定认为是js -->
  <script type="text/x-template" id="fx">
    <div>
      <ul>
        <li v-for="item in users" :key="item.id">{{ item.name }}</li>
      </ul>
    </div>
  </script>

  <script src="./js/vue.js"></script>
  <script>
    // 全局组件
    Vue.component('Fx', {
      // 指定模板
      template: '#fx',
      // 定义数据源  自定义组件中的数据源 不别人的  隔离性
      data() {
        return {
          users: [
            { id: 1, name: '你好世界' },
            { id: 2, name: 'bbb' }
          ]
        }
      }
    })

    // 父组件
    new Vue({
      el: '#root',
      data: {

      }
    })
  </script>
</body>

</html>